body {
  background-color: #f5f5f5;
}

.works--grid {
  grid-template-columns: 1fr;
}

.works--image {
  position: relative;
}

.works--images__comment {
  position: absolute;
  right: 5.5rem;
}

.works--image video {
  position: absolute;
  margin: 0 auto;
  width: 37.7rem;
}

.works--video__first {
  top: 21.6rem;
  left: 8.95rem;
}

.works--video__second {
  top: 24.1rem;
  left: 52.9rem;
}

.works--video__third {
  top: 21.6rem;
  left: 96.25rem;
}

.hidden-images {
  display: none;
  visibility: none;
}

/* ******************************* */
/* BELLOW 1500px */
/* ******************************* */

@media (max-width: 93.75em) {
  .works--image video {
    width: 29.6rem;
  }

  .works--video__first {
    top: 17rem;
    left: 7rem;
  }

  .works--video__second {
    top: 19.35rem;
    left: 41.55rem;
  }

  .works--video__third {
    top: 17rem;
    left: 75.63rem;
  }
}

/* ******************************* */
/* BELLOW 1280px */
/* ******************************* */

@media (max-width: 80em) {
  .works--image video {
    width: 24.2rem;
  }

  .works--video__first {
    top: 13.85rem;
    left: 5.8rem;
  }

  .works--video__second {
    top: 15.8rem;
    left: 34rem;
  }

  .works--video__third {
    top: 13.85rem;
    left: 61.85rem;
  }
}

/* ******************************* */
/* BELLOW 944px (Portrait Tablets) */
/* ******************************* */

@media (max-width: 59em) {
  .works--images {
    padding-top: 4rem;
  }

  .works--images__comment {
    top: -4rem;
    right: 0;
  }

  .works--image__second {
    margin-top: 6.4rem;
  }

  .works--image video {
    width: 59.5rem;
    left: 0.25rem;
  }

  .works--video__first {
    top: 29.3rem;
  }

  .works--video__second {
    top: 20.5rem;
  }

  .works--video__third {
    top: 20.5rem;
  }

  .works--video__fourth {
    top: 20.1rem;
  }

  .works--video__fifth {
    top: 24.1rem;
  }
}

/* ******************************* */
/* BELLOW 600px*/
/* ******************************* */

@media (max-width: 37.5em) {
  .works--images {
    max-width: 45rem;
  }

  .works--image__second {
    margin-top: 4rem;
  }

  .works--image video {
    width: 44.7rem;
    left: 0.19rem;
  }

  .works--video__first {
    top: 22.1rem;
  }

  .works--video__second {
    top: 15.5rem;
  }

  .works--video__third {
    top: 15.5rem;
  }

  .works--video__fourth {
    top: 15.1rem;
  }

  .works--video__fifth {
    top: 17.4rem;
  }
}

/* ******************************* */
/* BELLOW 450px (Phones) */
/* ******************************* */

@media (max-width: 28.125em) {
  .works--image video {
    width: 31.7rem;
    left: 0.15rem;
  }

  .works--video__first {
    top: 15.6rem;
  }

  .works--video__second {
    top: 11rem;
  }

  .works--video__third {
    top: 11rem;
  }

  .works--video__fourth {
    top: 10.5rem;
  }

  .works--video__fifth {
    top: 12.6rem;
  }
}